<template>
  <div>
    <HeaderFind></HeaderFind>
    <van-sticky class="city-message">
      <van-dropdown-menu>
        <van-dropdown-item title="区域">
          <van-picker title="标题" show-toolba="false" :columns="columns" />
          <van-row>
            <van-col :span="8"><van-button plain type="primary" block>取消</van-button></van-col>
            <van-col :span="16"><van-button type="primary" block>确定</van-button></van-col>
          </van-row>
        </van-dropdown-item>

        <van-dropdown-item title="方式"
          ><van-picker title="标题" show-toolba="false" :columns="columns1" />
          <van-row>
            <van-col :span="8"><van-button plain type="primary" block>取消</van-button></van-col>
            <van-col :span="16"><van-button type="primary" block>确定</van-button></van-col>
          </van-row></van-dropdown-item
        >
        <van-dropdown-item title="租金"
          ><van-picker title="标题" show-toolba="false" @confirm="onConfirm" :columns="columns2" />
          <van-row>
            <van-col :span="8"><van-button plain type="primary" block>取消</van-button></van-col>
            <van-col :span="16"><van-button type="primary" block>确定</van-button></van-col>
          </van-row></van-dropdown-item
        >
        <van-dropdown-item title="筛选" @open="show = true"></van-dropdown-item>
      </van-dropdown-menu>
    </van-sticky>
    <van-popup v-model="show" position="right" :style="{ height: '100%', width: '40%' }">内容</van-popup>
  </div>
</template>

<script>
import HeaderFind from '@/components/CityMessage/HeaderFind'
import { Toast } from 'vant'
import { cityMessage } from '@/api/user'
export default {
  name: 'CityMessage',
  components: {
    HeaderFind
  },
  props: {},
  data() {
    return {
      columns: [
        {
          text: '浙江',
          children: [
            {
              text: '杭州',
              children: [{ text: '西湖区' }, { text: '余杭区' }]
            },
            {
              text: '温州',
              children: [{ text: '鹿城区' }, { text: '瓯海区' }]
            }
          ]
        },
        {
          text: '福建',
          children: [
            {
              text: '福州',
              children: [{ text: '鼓楼区' }, { text: '台江区' }]
            },
            {
              text: '厦门',
              children: [{ text: '思明区' }, { text: '海沧区' }]
            }
          ]
        }
      ],
      columns1: ['不限', '整租', '合租'],
      columns2: ['不限', '1000及以下', '1000-2000', '2000-3000', '3000-4000', '4000-5000', '5000-7000', '7000以上'],
      value: 0,
      show: false,
      cityId: {
        id: JSON.parse(localStorage.getItem('cityName')).value
      }
    }
  },
  computed: {},
  watch: {},
  async created() {
    const data = await cityMessage(this.cityId)
    console.log(data.body)
  },
  methods: {
    onConfirm(value, index) {
      Toast(`当前值：${value}, 当前索引：${index}`)
    }
  }
}
</script>

<style scoped lang="less">
.city-message {
  .van-button {
    border-radius: 0%;
  }
}
</style>
